<style lang="less" scoped>
    .address-box{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background: #f0f0f0;
        .address-box_info{
            flex: 1;
            padding: 10px;
            box-sizing: border-box;            
        }
        .con{
            background: #fff;
            border-radius: 5px;
            display: flex;
            padding: 0 13px;
            flex-direction: column;
            .con-li{
                width: 100%;
                height: 50px;
                line-height: 50px;
                display: flex;
                border-bottom: 1px solid #e5e5e5;
                >span:first-child{
                    width: 150px;
                    height: 100%;
                    display: block;    
                }
                input{
                    width: 100%;
                    display: block;
                    height: 100%;
                }
                >span:last-child{
                    flex: 1;
                    position: relative;
                    .dowIcon{
                        width: 30px;
                        height: 30px;
                        display: block;
                        position: absolute;
                        right: 0px;
                        top: 10px;
                    }
                }
            }
        }
        .address-box_btn{
            width: 100%;
            height: 50px;
            line-height: 50px;
            background: #7A1634;
            text-align: center;
            position: fixed;
            bottom: 0px;
            left: 0px;
            right: 0px;
            display: block;
            border-radius: none;
            
        }
        .picker{
            height: 100%;
            width: 100%;
        }
        .setDefault{
            width: 100%;
            height: 80px;
            line-height: 80px;
            display: flex;
            background: #fff;
            align-items: center;
            justify-content: center;
            img{
                width: 17px;
                height: 17px;
                display: block;
                margin-right: 5px;
            }
        }
        .setDefault.current{
            color: #7A1634;
        }
        .w-span{
            width: 105px !important;
        }
        
       
    }
</style>
<template>
    <div class="address-box">
        <div class="address-box_info">
            <ul class="con">
                <li class="con-li">
                    <span class="text-gray text-14">收货人</span>
                    <input type="text" class="text-14" v-model="name" placeholder="请输入名称"/>
                </li>
                <li class="con-li">
                    <span class="text-gray text-14" >联系电话</span>
                    <input type="text " class="text-14" v-model="phoneNum" placeholder="请输入电话号码"/>
                </li>
                <li class="con-li">
                    <span class="text-gray w-span text-14" >省/市/区</span>
                    <!-- <span>cc001</span> -->
                    <span>
                        <picker mode="region"  @change="bindRegionChange" :value="region" :custom-item="customItem">
                            <div class="picker" >
                                <span class="text-14">{{region[0]}} {{region[1]}} {{region[2]}}</span>
                            </div>
                        </picker>
                    <img :src="dow" class="dowIcon"/>
                    </span>
                </li>
                <li class="con-li">
                    <span class="text-gray text-14">详细地址</span>
                    <input type="text" v-model="adDetail" class="text-14" placeholder="请输入详细地址"/>
                </li>
            </ul>
            <div class="setDefault" :class="{'current':setDefault}">
                <img :src="setDefault?ySelectIcon:yIcon" @click="setDefaultAddresss"/>
                <span class="text-14">设为默认</span>
            </div>
        </div>
        <span class="address-box_btn text-white text-16" @click="saveAddress">保存</span>
    </div>
</template>
<script>
import yIcon from '@/assets/images/yIcon.png'
import ySelectIcon from '@/assets/images/ySlectIcon.png'
import dow from '@/assets/images/dow.png'
export default {
    'title':'添加地址',
    data(){
        return{
            yIcon:yIcon,
            setDefault:false,
            ySelectIcon:ySelectIcon,
            dow:dow,
            region: ['广东省', '广州市', '海珠区'],
            customItem: '全部',
            name:'',
            phoneNum:'',
            adDetail:''
        }
    },
    methods: {
        bindRegionChange(e){
            console.log(e)
            this.region = e.mp.detail.value
        },
        setDefaultAddresss(){
            this.setDefault = !this.setDefault
        },
        saveAddress(){
             wx.navigateTo({
                url: '/pages/address-info/main'
            })
        }
    }
}
</script>

